import React, { useCallback, useState } from 'react'
import Test from './Test';
import Button from './Button';
// useMemo 可以用来缓存一个函数的执行结果, 遇到比较耗时的操作时, 可以将耗时操作的结果缓存起来, 就不需要每一次都执行了
import { useMemo } from 'react';
export default function MemoCom() {
  //定义一个状态
  let [count, setCount] = useState(0);
  let [count2, setCount2] = useState(100);
  let [arr, setArr] = useState([1,2,3,4,5]);
  //声明一个函数  useCallback 可以缓存一个函数
  // [] 为回调函数的依赖项, 如果依赖项的值没有发生变化, 则缓存函数不会改变, 反之如果依赖项的值发生了变化, 就会重新缓存回调函数
  let add = useCallback(
    () => {
      setCount(v => v + 1);
    }, []
  );
  //计算数组的乘积
  let v = useMemo(() => {
    console.log('memo run')
    let value = 1;
    arr.forEach(item => {
      value = value * item;
    });
    return value;
  }, [arr]);// 如果依赖项的值不发生变化, 则函数就不会再次执行

  return (
    <div>
      <h2>{count}</h2>
      <Button add={add} />
      <button onClick={() => {
        setCount(1);
      }}>设置为1</button>
      <hr />
      <Test />

      <hr />
      <h2>{count2}</h2>
      <button onClick={() => {
        setCount2(count2 + 1);
      }}>++</button>
      <hr />
      {v}
      <button onClick={() => {
        setArr([...arr, 2]);
      }}>向数组中添加一个元素</button>
    </div>
  )
}
